<script setup lang='ts'>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
const torouter = (e: string | number) => {
  router.push({ name: 'detailsPage', query: { type: e } })
}
const isData = ref()
const {data} = defineProps<{
  data?: any
}>()

watch(()=>data,(value)=>{
  if(value.length === 0) return isData.value = true
})
</script>

<template>
  <div class="content">
    <van-empty description="暂无素材数据" v-if="isData"/>
    <van-grid clickable :gutter="10" :column-num="2">
      <van-grid-item @click="torouter(i._id)" v-for="(i, index) in data" :key="index" icon="photo-o" text="文字">
        <van-image width="100%" height="200px" :src="i.imgdomainUrl" />
        <p>{{i.name}}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<style scoped>
.content {
  position: relative;
  z-index: 0;
}

.loading {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>